<style lang='scss' scoped>
@import '@css/style.scss';
.number-manager{
    display: flex;
    font-size: $infoSize;
    height: px2rem(20);
    line-height: px2rem(20);
    span{
        width: px2rem(30);
        text-align: center;
        display: inline-block;
        font-weight: 500;
    }
    &-number{
        background-color: $bgColor;
        padding: 0 px2rem(4);

    }
    &-disabled{
        color:#666;
    }
}
</style>
<template>
  <div class="number-manager">
    <span class="number-manager-less" :class="{'number-manager-disabled':number===1}" @click="onLessClick">-</span
    ><span class="number-manager-number">{{number}}</span
    ><span class="number-manager-add" @click="onAddClick">+</span>
  </div>
</template>
<script>
export default {
  props: {
    defaultNumber: {
      type: Number,
      default: 1
    },
  },
  data() {
    return {
      //数量数据源
      number: 1,
    };
  },    
  watch: {
    //监听
    defaultNumber(newValue) {
      this.number = newValue;
    },
    //监听数量的变化
    number(newv){
        this.$emit('onChangeNumber',newv);
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {},
    /**
     * 减号点击
     */
    onLessClick(){
        if(this.number===1){
            return ;
        }
        this.number-=1;
    },
    /**
     * 加号按钮
     */
    onAddClick(){
        this.number+=1;
    }
  },
  computed: {},
};
</script>